<template>
<div>
  <h2>商家入住</h2>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="商家类型" prop="merchantName">
      <el-select v-model="form.merchantName" placeholder="请输入商家类型">
        <el-option label="房东" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="商户名称" prop="tenantName">
      <el-input v-model="form.tenantName" placeholder="请输入商户名称" />
    </el-form-item>
    <el-form-item label="法人" prop="legalPerson">
      <el-input v-model="form.legalPerson" placeholder="请输入法人" />
    </el-form-item>
    <el-form-item label="省/市/县">
      <el-cascader
          v-model="form.citys"
          :options="listCity"></el-cascader>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="form.address" placeholder="请输入地址" />
    </el-form-item>
    <el-form-item label="统一信征码" prop="unifyCode">
      <el-input v-model="form.unifyCode" placeholder="请输入统一信征码" />
    </el-form-item>
    <el-form-item label="身份证" prop="idCard">
      <el-input v-model="form.idCard" placeholder="请输入身份证" />
    </el-form-item>
    <el-form-item label="营业执照" prop="license">
      <el-input v-model="form.license" placeholder="请输入营业执照" />
    </el-form-item>
    <el-form-item label="房产证" prop="ownership">
      <el-input v-model="form.ownership" placeholder="请输入房产证" />
    </el-form-item>
    <el-form-item label="系统用户Id" prop="userId">
      <el-input v-model="form.userId" placeholder="请输入系统用户Id" />
    </el-form-item>
    <el-form-item label="大文件上传">
      <uploader :options="options" class="uploader-example"
                @file-added="onFileAdded">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <p>Drop files here to upload or</p>
          <uploader-btn>select files</uploader-btn>
          <uploader-btn :attrs="attrs">select images</uploader-btn>
          <uploader-btn :directory="true">select folder</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交审核</el-button>
      <el-button type="primary" @click="reset">取消</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
export default {
  //商户入住
  name: "AddMerchant",
  data() {
    return{
      options: {
        target: 'http://localhost:8080/file/postFileUpload', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      },
      listCity:[],
      form: {
        merchantName: null,
        tenantName: null,
        legalPerson: null,
        citys:[],
        regionId1: null,
        regionId2: null,
        regionId3: null,
        address: null,
        status: 0,
        unifyCode: null,
        idCard: null,
        license: null,
        ownership: null,
        createTime: null,
        userId: null
      },
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    this.axios.get("http://localhost:8080/house/city/list").then(
        res=>{
          this.listCity=res.data
        }
    )
  },
    methods: {
      onFileAdded(file) {
        const fileReader = new FileReader()
        fileReader.readAsBinaryString(file);
        fileReader.onload = e => {
          const md5 = SparkMD5.hashBinary(e.target.result);
          console.log(md5);
          file.uniqueIdentifier = md5;
        }
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          merchantName: null,
          tenantName: null,
          legalPerson: null,
          regionId1: null,
          regionId2: null,
          regionId3: null,
          address: null,
          status: 0,
          unifyCode: null,
          idCard: null,
          license: null,
          ownership: null,
          createTime: null,
          userId: null
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getMerchant(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商户";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              this.form.regionId1 = this.form.citys[0]
              this.form.regionId2 = this.form.citys[1]
              this.form.regionId3 = this.form.citys[2]
              this.axios.post("http://localhost:8080/merchant/merchant/add",this.form).then(response => {
                this.$message.success("修改成功");
                this.$router.push("/merchant/list")
              });
            } else {
              this.form.regionId1 = this.form.citys[0]
              this.form.regionId2 = this.form.citys[1]
              this.form.regionId3 = this.form.citys[2]
              this.axios.post("http://localhost:8080/merchant/merchant/add",this.form).then(res => {
                console.log(res.data)
                if (res.data.code==200) {
                  this.$message.success("添加成功")
                  this.$router.push("/merchant/list")
                }else{
                  this.$message.error("添加失败")
                }
              });
            }
          }
        });
      },
      //省市县
      getListCity() {
        listCity().then(response=>{
          console.log(response)
          this.listCity=response
        })
    }
  }
}
</script>

<style scoped>

</style>
